<template>
  <div class="tab-nav">
    <div
      @click.stop="
        onTabClick(pane, index);
      "
      class="tab-nav_btn"
      v-for="(pane, index) in panes"
      :key="index"
      :id="`pane-${index}`"
    >
      <span class="labelName" :class="{ active: activeNum === index }">{{
        pane.props.label
      }}</span>
      <span class="hotNumber" v-if="pane.props.hotNumber">{{ pane.props.hotNumber }}</span>
    </div>
    <span
      class="activeHold"
      :style="{ width: WIDTH + 'px', transform: `translateX(${TRANSLATEX}px)` }"
    ></span>
  </div>
</template>

<script>
import { nextTick, ref, watch } from "vue";
export default {
  props: {
    panes: Array,
    onTabClick: Function,
    activeNum: Number
  },

  setup(proxy, expose) {
    // 滑块动画👇
    const WIDTH = ref(0);
    const TRANSLATEX = ref(0)
    watch(() => proxy.activeNum, (val) => {
      // console.log(val);
      // if (!val) return
      nextTick(() => {
        let TotalWidth = 0
        const btnDom = document.querySelectorAll('.tab-nav_btn')[val]
        Array.from(btnDom.children).forEach(item => {
          TotalWidth += item.offsetWidth
          WIDTH.value = TotalWidth
        })
        TRANSLATEX.value = btnDom.children[0].offsetLeft
      })
    }, { immediate: true })

    return {
      WIDTH,
      TRANSLATEX
    };
  }
};
</script>

<style lang="less" scoped>
.tab-nav {
  display: flex;
  position: relative;
  .tab-nav_btn {
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    color: @xtxColor;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #f5f5f5;
    &:nth-last-child(2) {
      border: none;
    }

    .labelName {
      margin: 0 10px;
      pointer-events: none;
      font-size: 22px;
      &:hover {
        color: @btnHover;
      }
    }
    .hotNumber{
      margin: 0 10px 10px 0;
      pointer-events: none;
      color: red;
    }
    .active {
      color: @btnActive;
    }
  }
  .activeHold {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: block;
    height: 2px;
    width: 80px;
    background-color: red;
    transform: translateX(0px);
    transition: 0.3s;
  }
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    z-index: 100;
  }
}
</style>
